<template>
    <div class="login-container" :class="bgChange" @keyup.enter="handleLogin">
        <!-- <div class="login-wrapper-left animated bounceInDown">
            <div class="login-left">
                <img class="img" src="../../assets/images/logo1.png">
            </div>
        </div> -->

        <!-- 动画效果 -->
        <!-- <particles/> -->

        <!-- 玻璃效果 -->
        <!-- <div class="card_box"></div> -->

        <div class="login-wrapper-right animated bounceInDown">
            <div class="login-border">
                <div class="login-main">
                    <h4 class="login-title">
                        华智-项目管理系统
                    </h4>
                    <div class="input_wrap">
                        <el-form ref="form" :model="form">
                            <el-input v-model="form.username" placeholder="请输入用户名/手机号" prefix-icon="el-icon-user"></el-input>
                            <el-input v-model="form.password" show-password placeholder="请输入密码" prefix-icon="el-icon-key"></el-input>

                            <el-button type="primary" class="login-submit" @click="handleLogin" :loading="loading">登 录</el-button>
                        </el-form>
                    </div>

                    <div class="other_wrap">
                        <div class="remember">
                            <el-checkbox v-model="form.remember">自动登录</el-checkbox>
                        </div>
                        <div class="forget">
                            忘记密码
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Message } from 'element-ui'
import particles from "@/components/particles/particles";
export default {
    name: "login",
    components: {particles},
    data() {
        return {
            bg: ['a', 'b', 'c'],
            bgChange: 'a',
            bgIndex: 0,
            loading: false,
            form: {
                username: null,
                password: null,
                remember: false
            }
        }
    },

    created() {
        let account = localStorage.getItem('account')
        account = account ? JSON.parse(account) : null
        if(account && account.remember) {
            this.form = account
        }

        this.bgChange = this.bg[this.bgIndex]
        this.bgIndex = this.bgIndex++
        setInterval(() => {
            this.bgChange = this.bg[this.bgIndex]
            this.bgIndex++
            if(this.bgIndex == 3) {
                this.bgIndex = 0
            }
        }, 5000)
    },
    methods: {
        async handleLogin() {
            this.loading = true
            const res = await this.$store.dispatch('handleLogin', this.form).catch(error => {
                this.loading = false
            })
            if(res.status) {
                Message.success({
                    duration: 500,
                    message: res.msg,
                    onClose: ()=>{
                        if(this.form.remember) {
                            localStorage.setItem('account', JSON.stringify(this.form))
                        }
                        this.loading = false
                        this.$router.replace({ path: '/' })
                    }
                });
            } else {
                this.loading = false
                Message.error({message: res.msg});
            }

        }
    }
};
</script>

<style lang="scss" scope>
@import './login'
</style>
